<template>
	<div class="container">
		<div class="header-c" v-if="userShow">
			<img :src="userInfo.avatarUrl" alt="">
			<div class="info-c">
				<span class="name">{{userInfo.nickName}}</span>
				<span class="phone">{{userInfo.phone}}</span>
			</div>
		</div>
		<div class="header-c" v-else>
			<img src="../../../static/images/nologin.png" alt="" style="width:80rpx;height:80rpx;">
			<div class="info-c">
				<button @click="getUserInfo1">登录/注册</button>
			</div>
		</div>

		<div class="list-c">
			<div class="item" :class="computedClassStr" v-for="(item, index) in itemList" :key="index" :data-index="index" @click="itemClick(item)">
				<div class="item-l">
					<i class='icon' :class="item.icon"></i>
					<span class="title">{{item.title}}</span>
				</div>
				<i class='icon mt-arrow-right-o'></i>
			</div>
		</div>
		<div class="btn" @click="logoutClick" v-if="userShow">退出账号</div>
	</div>
</template>

<script>
import {timestampToCommonDate} from '@/utils/formatTime'
import {_array} from '@/utils/arrayExtension'
import {formData} from '@/wxRequest/requestApi'
export default {
	data() {
		return {
			userInfo: {}, //用户信息
			userShow: false, //登录状态
			isAuthorize: false, //是否授权过
			isLogin: true,
			itemList: [
				{
					title: '银行卡管理',
					icon: 'mt-protocol-o',
					path: '/pages/addcard/main',
				},
				{
					title: '商家代金券',
					icon: 'mt-coupon-o',
					path: '/pages/couponList/main',
					amount: 10,
				},
				{
					title: '我的地址',
					icon: 'mt-my-location-o',
					path: '/pages/addressList/main',
				},
				{
					title: '邀请有奖',
					icon: 'mt-gift-o',
					path: '/pages/share/main',
				},
				{
					title: '客服中心',
					icon: 'mt-customer-service-o',
					call: true,
				},
				{
					title: '帮助和反馈',
					icon: 'mt-help-o',
					path: '/pages/feedback/main',
				},
				// {
				// 	title: '协议和说明',
				// 	icon: 'mt-protocol-o',
				// 	path: '/pages/protocol/main',
				// },
				{
					title: '余额',
					icon: 'mt-protocol-o',
					path: '/pages/money/main',
				},
				{
					title: '交易密码管理',
					icon: 'mt-protocol-o',
					path: '/pages/password/main',
				},
				{
					title: '会员卡',
					icon: 'mt-protocol-o',
					path: '/pages/huiyuanka/main',
				},
			],
		}
	},
	computed: {
		computedClassStr() {
			return this.isLogin ? 'stopItem' : ''
		},
	},
	onLoad() {},
	onShow() {
		this.getSetting()
		this.isLogin = !this.$store.state.user.islogin
	},
	methods: {
		//判断是否有交易密码
		setPassword() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '//selectStatus',
				method: 'post',
				data: {
					userId: userId,
				},
			}
			this.$JZWX(getParams).then(re => {
				if (re.status == 0) {
					console.log('是否有交易密码,', re)
					if (re.data == 1) {
						wx.navigateTo({
							url: '/pages/password/main',
						})
					} else {
						wx.navigateTo({
							url: '/pages/shezhiPassword/main',
						})
					}
				} else {
					wx.showToast({
						title: '请求失败',
						image: '../../static/images/gantanhao.png',
					})
				}
			})
		},
		itemClick(item) {
			console.log(item)
			if (item.call) {
				wx.makePhoneCall({
					phoneNumber: '18663783911',
				})
				return
			}
			if (item.title === '交易密码管理') {
				this.setPassword()
			} else {
				wx.navigateTo({url: item.path})
			}
		},
		getSetting() {
			var that = this
			wx.getSetting({
				success: function(res) {
					if (res.authSetting['scope.userInfo']) {
						wx.getUserInfo({
							success: function(res) {
								that.isAuthorize = true
								that.wxLogin()
								// that.userInfo = res.userInfo
							},
						})
					} else {
					}
				},
			})
		},
		getUserInfo1() {
			if (this.isAuthorize) {
				wx.navigateTo({
					url: '/pages/login/main',
				})
			} else {
				wx.navigateTo({
					url: '/pages/authority/main',
				})
			}
		},
		/**
		 * 微信登录
		 */
		wxLogin() {
			let that = this
			wx.login({
				success: res => {
					if (res) {
						this.fistLogin(res)
					}
				},
			})
		},
		/**
		 * 小程序授权登录第一步
		 */
		fistLogin(res) {
			let getParams = {
				url: '/login',
				data: {
					code: res.code,
				},
				method: 'POST',
			}
			this.$JZFormdata(getParams).then(re => {
				if (re.status == 0) {
					this.SecondLogin(re)
				}
			})
		},

		/**
		 * 小程序授权登录第二步  获取微信用户信息
		 */
		SecondLogin(firstData) {
			let that = this
			wx.getUserInfo({
				success: res => {
					let mobile = wx.getStorageSync('userPhone')
					let getParams = {
						url: '/login/userInfo ',
						data: {
							encryptedData: res.encryptedData,
							sessionKey: firstData.data.sessionKey,
							iv: res.iv,
							relationId: '1',
							mobile: mobile,
						},
						method: 'POST',
					}
					that.$JZFormdata(getParams).then(re => {
						if (re.status == 0) {
							wx.setStorageSync('accessToken', re.data.accessToken)
							wx.setStorageSync('userId', re.data.userId)
							wx.setStorageSync('username', re.data.username)
							that.userShow = true
							this.$store.state.user.islogin = true
							that.userInfo.avatarUrl = res.userInfo.avatarUrl
							that.userInfo.nickName = res.userInfo.nickName
							that.userInfo.phone = wx.getStorageSync('userPhone')
						}
					})
				},
			})
		},

		/**
		 * @Description: ${退出登录}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/14
		 * @Version 1.0
		 */
		logoutClick() {
			var that = this
			wx.showModal({
				title: '确认退出？',
				content: '退出登录后将无法查看订单，重新登录即可查看',
				confirmColor: '#FFC24A',
				success: function(res) {
					if (res.confirm) {
						// wx.clearStorage('userName')
						wx.clearStorage()
						that.userShow = false
						that.$store.state.user.islogin = false
						// that.onLoad()
					} else if (res.cancel) {
						resolve('cancle')
					}
				},
			})
		},
	},

	created() {},
}
</script>

<style lang="scss" scoped>
.container {
	.header-c {
		display: flex;
		align-items: center;
		height: 200rpx;
		background-color: #ffd26b;
		img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin-left: 30rpx;
		}
		.info-c {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			button {
				border: 0px;
				background-color: transparent;
				border: none;
				font-size: 25rpx;
			}
			.name {
				font-size: 32rpx;
				color: $textBlack-color;
				font-weight: bold;
			}
			.phone {
				font-size: 28rpx;
				color: $textBlack-color;
			}
		}
	}
	.list-c {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		background-color: white;
		.item {
			display: flex;
			align-items: center;
			height: 88rpx;
			border-bottom: 2rpx solid $spLine-color;
			padding: 0 20rpx;
			&.stopItem {
				pointer-events: none;
			}
			.item-l {
				display: flex;
				flex: 1;
				i {
					font-size: 38rpx;
					color: $textDarkGray-color;
				}
				.title {
					font-size: 28rpx;
					color: $textBlack-color;
					margin-left: 30rpx;
					margin-top: 6rpx;
				}
				.amount {
					font-size: 38rpx;
					color: $mtRed-color;
					margin: 0 10rpx;
					display: flex;
					align-items: center;
					span {
						font-size: 24rpx;
						color: $textDarkGray-color;
						margin-left: 10rpx;
					}
				}
			}
			i {
				font-size: 24rpx;
				color: $textGray-color;
			}
		}
		.item:last-child {
			border-bottom: 0rpx solid $spLine-color;
		}
	}
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		background-color: white;
		margin: 20rpx 0;
		color: $textBlack-color;
		font-size: 28rpx;
	}
}
</style>
